<template>
	<view class="orders">
		<u-navbar :autoBack="true" title="商品管理" :placeholder="true" bgColor="rgba(255,255,255,0)"></u-navbar>
		<view class="me-center" v-if="list.length > 0">
			<view class="list-tab">
				<view class="item-ul" v-for="(item, index) in list" :key="index">
					<view class="item-li">
						<view class="item-content">
							<view class="item-left" v-if="item.images">
								<u-image :src="'https://m.lqvvvv.com'+item.images" radius="10" width="100" height="100"></u-image>
							</view>
							<view class="item-right">
								<view class="item-right-v1 title">
									<view class="item-title">{{item.name}}</view>
									<view class="tisp" v-if="item.is_vip == 1">会员商品</view>
								</view>
								<view class="item-right-v1 induce">
									<text
										class="rate-text1">发布时间：{{$u.timeFormat(item.created_at, 'yyyy-mm-dd hh:MM:ss')}}</text>
								</view>
								<view class="item-right-v2">
									<view class="v2-fh">
										<text>￥</text>
										<text class="v2-price">{{item.price}}</text>
										<text class="price">{{item.market_price}}</text>
									</view>
									<view class="item-btom">
										<view @click="cancelClick(item.id)">
											<view class="item-btom-btn">删除</view>
										</view>
										<view @click="goenid(item)">
											<view class="item-btom-btn pay">编辑</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
		<view class="empty ly-flexc-cen" v-else><u-empty text="暂无数据" mode="list"></u-empty></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				id: '',
				search: {
					page: 1,
					limit: 5,
				},
				status: 'loading',
			};
		},
		onLoad(e) {
			this.id = e.id
			this.getList();
		},
		onReachBottom() {
			this.search.page += 1;
			this.status = 'loading'
			this.getList();
		},
		methods: {
			goenid(item) {
				this.$navTo.togo('/pages/business/upgoods/index',{id:item.id})
			},
			cancelClick(id) {
				if(this.list.length < 2){
					uni.showToast({
						icon:'none',
						title:'最少保留一个产品！'
					})
					return
				}
				let app = this
				uni.showModal({
					title: '提示',
					content: '是否删除此商品！',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							let params = {
								product_id: id
							}
							app.$Request({
								method: 'POST',
								url: '/api/shop_product/delete',
								data: params,
								ismsg: false,
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: '商品已删除',
										icon: 'none'
									})
									app.search.page = 1
									app.getList()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			evaluateClick(id) {
				uni.navigateTo({
					url: '/pagewithtenant/tenant/order?id=' + id
				})
			},
			// 获取列表
			getList() {
				let params = {
					shop_id: this.id,
					page: this.search.page,
					limit: this.search.limit
				}
				this.$Request({
					method: 'POST',
					url: '/api/shop_product/getList',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.status = res.data.data.length < this.search.limit ? 'nomore' : 'loadmore';
						if (this.search.page == 1) {
							this.list = res.data.data
						} else {
							this.list = this.list.concat(res.data.data);
						}
					}
				})
			},
		}
	};
</script>
<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	.orders {
		min-height: 100vh;
		background-image: url('https://m.lqvvvv.com/assets/static/index/nav-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 800rpx;
		padding: 30rpx;
		background-color: #F7F8FC;

		.me-center {
			width: 100%;

			.list-tab {
				.item-ul {
					margin-bottom: 20upx;
					background-color: #ffffff;
					border-radius: 15upx;
				}
				.item-content {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 10upx;
				}

				.item-right {
					flex: 1;
					margin-left: 20upx;

					.title {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;
						color: #000;

						.tisp {
							background: linear-gradient(to right, #ff557f 0%, #ff0000 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							display: inline-block;
						}
					}

					.item-right-v1 {
						width: 100%;
						padding: 8rpx 0;

						.item-title {
							font-size: 26rpx;
							font-weight: bold;
							display: -webkit-box;
						}
					}

					.induce {
						display: flex;
						align-items: center;

						.rate-text1 {
							font-size: 24rpx;
							color: #B9B9B9;
						}
					}

					.item-right-v2 {
						margin-top: 10rpx;
						display: flex;
						justify-content: space-between;
						color: #a3a3a3;
						font-size: 26upx;

						.v2-fh {
							color: #ff5500;
							font-size: 24upx;
						}

						.v2-price {
							color: #ff5500;
							font-weight: bold;
							font-size: 30upx;
						}

						.price {
							text-decoration: line-through;
							margin-left: 10rpx;
							color: #999;
						}

						.item-btom {
							display: flex;
							justify-content: flex-end;
							font-size: 26upx;

							.item-btom-btn {
								padding: 4upx 30upx;
								border: 1px solid #d2d3d4;
								border-radius: 20upx;
								align-items: center;
								margin-left: 15rpx;
							}

							.pay {
								background-color: #5755F2;
								border: 1px solid #5755F2;
								color: #ffffff;
							}
						}
					}
				}


			}
		}

		.empty {
			margin: 72upx 0 144upx 0;
		}
	}
</style>